<template>
    <el-card class="index">
      <div slot="header" class="clearfix">
        <span>图片资质上传</span>
        <!-- <span><el-switch style="display: block"  v-model="form.value"  active-color="#13ce66" inactive-color="#D9D9D9" :inactive-value="false" :active-value="true" active-text="开"  inactive-text="关" /></span> -->
     </div>
     <div class="form">
        <el-form label-position="top" :model="form" :inline="true" :rules="formRules" ref="formRules" label-width="150px" >
            <el-row>
             <el-col :span="6">
               <el-form-item label="营业执照" prop="trade_licence" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccess"
                  >
                  <img v-if="form.trade_licence" :src="form.trade_licence" class="avatar">
                  <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="身份证正面" prop="card_positive" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF02"
                  >
                  <img v-if="form.card_positive" :src="form.card_positive" class="avatar">
                  <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="身份证反面" prop="card_negative" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccessF03"
                  >
                  <img v-if="form.card_negative" :src="form.card_negative" class="avatar">
                  <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                </el-upload>
               </el-form-item>
             </el-col>
                <el-col :span="6" >
                 <el-form-item label="开户许可证" prop="open_account_licence" >
                   <el-upload
                   :action="uploadUrl"
                   :headers="token"
                     :show-file-list="false"
                     :on-success="doorUpLoadSuccessfF08"
                     >
                     <img v-if="form.open_account_licence" :src="form.open_account_licence" class="avatar">
                     <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                   </el-upload>
                  </el-form-item> 
                </el-col>
             </el-row>
        </el-form>
     </div>
    </el-card>
</template>

<script>
export default{
    name:'imgQualification',
    props:{
        merchantId:[String,Number],
        userType:[String,Number],
        editFileList:[Array]
    },
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + "/product/v31/api/merchant/uploadfile/upload",
            token: { token: sessionStorage.getItem("token") },
            file_type:'',
            // merchantId:'',
            form:{
              value:true,
              open_account_licence:'',
              card_negative:'',
              card_positive:'',
              trade_licence:''
            },
            file_list:[],
            formRules:{
                trade_licence:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.trade_licence){
                        callback();
                    }else{
                        callback(new Error('请上传营业执照！'))
                    }
                 } }],
                 card_positive:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.card_positive){
                        callback();
                    }else{
                        callback(new Error('请上传身份证正面！'))
                    }
                 } }],
                 card_negative:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.card_negative){
                        callback();
                    }else{
                        callback(new Error('请上传身份证反面！'))
                    }
                 } }],
                 open_account_licence:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.open_account_licence){
                        callback();
                    }else{
                        callback(new Error('请上传开户许可证！'))
                    }
                 } }],
            },
        }
    },
    watch:{
        form:{
            handler(nValue , oValue){
               this.$emit('fileListChange' ,nValue)
            },
            deep:true
        },
    },
    methods:{
        doorUpLoadSuccessfF08(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.open_account_licence = file.data.filePath
            this.$forceUpdate()
        },
        doorUpLoadSuccessF03(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.card_negative = file.data.filePath
            this.$forceUpdate()
        },
        doorUpLoadSuccessF02(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.card_positive = file.data.filePath
            this.$forceUpdate()
        },
        doorUpLoadSuccess(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.trade_licence = file.data.filePath
            this.$forceUpdate()
        }
    }
}

</script>

<style scoped>
   .index{
    width: 100%;
    margin-bottom: 30px;
   }
   .clearfix{
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
   .avatar{
    width: 126px;
    height: 102px;
  }
.avatar-none{
    width: 126px;
    height: 102px;
}
::v-deep .el-form-item--small.el-form-item{
    text-align: center;
    /* margin-right: 130px; */
}
::v-deep .el-col{
    display:flex;
    justify-content:center;
}
::v-deep .el-upload--text{
    width: 126px !important;
    height: 102px !important;
    line-height: 102px !important;
}
</style>